<template>
  <div class="room-index">
    <div :class="{eyeModel: this.isEyes}"></div>
    <!-- <Room v-if="roomShow" @eyeModel="changeColor"/> -->
    <div v-if="detectShow" class="detection">
      <div id="detection-box-all"></div>
    </div>
  </div>
</template>

<script>
// import Room from "@/components/Room/Room.vue";
let eventEmitter = BJY.eventEmitter
let lstore = window.localStorage

export default {
  components: {
    // Room,
  },
  data () {
    return {
      rkey: 'yxp_detect',
      detectShow: true,
      roomShow: false,
      detectionNew: null,
      isEyes: false
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    changeColor (val) {
      this.isEyes = val
      console.log(val + '^^^^^^^^^^^^^^^')
    }
  },
  created () {
  },
  mounted () {
    let ds = []
    let that = this
    BJY.store.set({
      class: {
        webrtcType: 1
      },
      user: {
        type: BJY.auth.isTeacher() ? 1 : 0
      }
    })
    let success = Number(lstore.getItem(that.rkey)) || 0
    if(1 || success == 0){
      BJY.Player.webrtc
      .init()
      .then(() => {
        !that.detectionNew && (that.detectionNew = BJY.DetectionNew.create({
            el: $('#detection-box-all')[0],
            props: {
                onDetectResult: function(success, a) {
                    console.log(success ? "检测通过": "检测未通过", a)
                    if(success){
                      lstore.setItem(that.rkey, 1)
                    }
                    // that.detectShow = false
                    // that.roomShow = true
                    // ds = document.getElementsByClassName('loaded-over')
                    // for(let d of ds){
                    //   d.style.display = ''
                    // }
                    that.$router.push({
                      path: '/yxproom',
                      query: that.$route.query || {}
                    })
                }
            }
        }))
      })
    }else{
      // that.detectShow = false
      // that.roomShow = true
      // ds = document.getElementsByClassName('loaded-over')
      // for(let d of ds){
      //   d.style.display = ''
      // }
    }
  },
  beforeDestroy () { }
}
</script>
<style lang="less">
.bjy-detection-box .prepare-checkbox, .bjy-detection-box .prepare-notice {
  display: none!important;
}
</style>
<style lang="less" scoped>
.eyeModel {
  position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: #FFB139;
    opacity: 0.07;
    pointer-events: none;
}
.detection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
.room-index {
  height: 100%;
  .detection {
    height: 100%;
    position: relative;
    /deep/.bjy-detection-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
}
</style>
